import React, { Component } from "react";
import "sass/weiketang.scss";
import "sass/stands/category-box.scss";
import ImgListBox from "components/stands/ImgListBox";
import Crumbs from "components/stands/Crumbs";
import MyBackTop from "components/MyBackTop";
import http from "service/weketang";
export default class WeiKeTangList extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      crumbsData: [
        {
          path: "/stands/weiketang",
          value: "雷霆微课堂"
        },
        {
          path: "/",
          value: "课堂列表"
        }
      ],
      current:1,
      wktType:{},
      categoryName: '',
      kechengName:''
    };
  }
  async componentDidMount () {
    await this.getData(0,0)
    await this.getData(this.props.match.params.Type,this.props.match.params.name)
  }
  componentWillUnmount () {
  }
  getData = async(Type, name)=>{
    if (Type == 'kecheng') {
      this.setState({ kechengName: name });
    } else {
      this.setState({ categoryName: name });
    }
    let { kechengName, categoryName } = this.state
    let wktType = await http.getwktType({
      current: this.state.current,
      classification: Type == 'kecheng' ? name : kechengName,
      industryCategory: Type != 'kecheng' ? name : categoryName,
      name: 0
    })
    if (this.state.wktType.shancheckedclass && this.state.wktType.checkeCategory) {
      this.setState(prev => {
        return {
          ...prev,
          wktType:{
            list: wktType.list
          }
        }
      });
    } else {
      this.setState({ wktType });
    }
  }
  selectType=(type,name)=>{
    this.getData(type, name)
  }
  render () {
    let { crumbsData, wktType, categoryName, kechengName} = this.state
    return (
      <div className="wrapper weketang-list">
        <div className="grayColor"></div>
        <Crumbs crumbsData={crumbsData}/>
        {/* 分类入口 */}
        <div className="category-box">
          <dl>
            <dt>课堂类型：</dt>
            <dd>
              {wktType.checkedclass && wktType.checkedclass.map((itemTwo, inx) => {
                return (<span className={itemTwo.miroclassClassName === kechengName ? 'active' : ''} 
                  onClick={this.selectType.bind(this,"kecheng",itemTwo.miroclassClassName)} key={`id_${inx}`}>{itemTwo.miroclassClassName}</span>)
              })}
            </dd>
          </dl>
          <dl>
            <dt>行业分类：</dt>
            <dd>
              {wktType.checkeCategory && wktType.checkeCategory.map((itemTwo, inx) => {
                return (<span className={itemTwo.categoryName === categoryName ? 'active' : ''}
                  onClick={this.selectType.bind(this, "fenlei",itemTwo.categoryName)}
                key={`id_${inx}`}>{itemTwo.categoryName}</span>)
              })}
            </dd>
          </dl>
        </div>
        <div className="model">
          <div className="kecheng-figure-news-list">
            <ul className="clearfix">
              {wktType.list && wktType.list.records.map((item, index) => {
                return (
                  <ImgListBox DataList={item} key={`id_${index}`} LinkUrl='/stands/weiketangDetail' />
                )
              })}
            </ul>
          </div>
        </div>
        <MyBackTop />
      </div>
    );
  }
}
